<template>
  <!-- 头部提交表单 -->
  <el-row class="top">
    <el-button type="primary">保存</el-button>
    <el-button @click="handelBack">返回</el-button>
  </el-row>

  <!-- 分割线 -->
  <el-divider />

  <!-- 表单数据 -->
  <el-form
    ref="ruleFormRef"
    :inline="true"
    :model="ruleForm"
    :rules="rules"
    label-width="100px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="申请时间">
      <el-input v-model="formDate.applyDate" style="width: 250px" />
    </el-form-item>
    <el-form-item label="申请人">
      <el-input v-model="formDate.applyName" style="width: 250px" />
    </el-form-item>
    <el-form-item label="申请类型" prop="applyType">
      <el-select v-model="applyType.value" style="width: 250px">
        <el-option
          v-for="item in applyType.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="项目编码" prop="proCode">
      <el-input v-model="formDate.proCode" style="width: 250px" />
    </el-form-item>
    <el-form-item label="项目名称" prop="proName">
      <el-input v-model="formDate.proName" style="width: 250px" />
    </el-form-item>
    <el-form-item label="申请金额">
      <el-input v-model="formDate.applyMoney" style="width: 250px" />
    </el-form-item>
  </el-form>

  <!-- 添加新数据 -->
  <div class="addData">
    <el-button type="primary" text @click="dialogFormVisible = true">
      添加产品数据
    </el-button>
    <el-dialog v-model="dialogFormVisible" title="添加产品数据">
      <el-form :model="form" :inline="true">
        <el-form-item label="物资编码" :label-width="labelWidth">
          <el-input v-model="form.matCode" autocomplete="off" />
        </el-form-item>
        <el-form-item label="物资名称" :label-width="labelWidth">
          <el-input v-model="form.matName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="供应商名称" :label-width="labelWidth">
          <el-input v-model="form.supName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="供应商联系人" :label-width="labelWidth">
          <el-input v-model="form.supContact" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系电话" :label-width="labelWidth">
          <el-input v-model="form.supPhone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="单价" :label-width="labelWidth">
          <el-input v-model="form.price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="数量" :label-width="labelWidth">
          <el-input v-model="form.amount" autocomplete="off" />
        </el-form-item>
        <el-form-item label="单位" :label-width="labelWidth">
          <el-input v-model="form.unit" autocomplete="off" />
        </el-form-item>
        <el-form-item label="品级" :label-width="labelWidth">
          <el-select v-model="form.grade" placeholder=" ">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="产地" :label-width="labelWidth">
          <el-select v-model="form.origin" placeholder=" ">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form-item label="品牌" :label-width="labelWidth">
        <el-input v-model="form.brand" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="labelWidth">
        <el-input
          v-model="form.remark"
          style="width: 91.5%"
          autocomplete="off"
        />
      </el-form-item>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >保存</el-button
          >
          <el-button type="danger" @click="dialogFormVisible = false"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// import router from "@/router";
import { reactive } from "vue";
import { ref } from "vue";
import { useRouter } from "vue-router";

const dialogFormVisible = ref(false);
const labelWidth = "100px";
const router = useRouter();

const formDate = reactive({
  matCode: "",
  matName: "",
  supName: "",
  supContacts: "",
  price: "",
  amount: "",
  unit: "",
  grade: "",
  origin: "",
  brand: "",
  remark: "",
});
const applyType = reactive({
  options: [
    {
      value: "1",
      label: "项目预购",
    },
    {
      value: "2",
      label: "库存预购",
    },
    {
      value: "3",
      label: "生产预购",
    },
    {
      value: "4",
      label: "生产及时采购",
    },
  ],
  value: " ",
});
const rules = reactive({
  applyType: [
    {
      required: true,
      message: "此项不能为空！",
      trigger: "blur",
    },
  ],
  proCode: [
    {
      required: true,
      message: "此项不能为空！",
      trigger: "blur",
    },
  ],
  proName: [
    {
      required: true,
      message: "此项不能为空！",
      trigger: "blur",
    },
  ],
});

const form = reactive({
  matCode: "",
  matName: "",
  supName: "",
  supContact: "",
  supPhone: "",
  price: "",
  amount: "",
  unit: "",
  grade: [],
  origin: [],
  brand: "",
  remark: "",
});

const handelBack = () => {
  router.push("/purchase/apply/list");
};
</script>

<style lang="less" scoped>
.el-row {
  float: right;
  margin-top: 9px;
  .el-button {
    margin: 0 10px;
  }
}
.el-divider {
  margin-top: 50px;
}
.el-form {
  .el-form-item {
    margin-right: 15px;
    .el-button {
      color: #fff;
    }
  }
}
/deep/.el-dialog {
  width: 60%;
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
}
</style>
